<!DOCTYPE html>
<html>
<head>
  <title>Custom Event Example</title>
</head>
<body>
  <button id="myButton">Click Me</button>

  <script>
    // 创建并触发自定义事件
    function dispatchCustomEvent() {
      var event = new CustomEvent('myEvent', {
        detail: { message: 'Hello, World!' }
      });
      document.dispatchEvent(event);
    }

    // 监听自定义事件
    document.addEventListener('myEvent', function(event) {
      console.log('Received custom event:', event.detail.message);
    });

    // 点击按钮时触发自定义事件
    var button = document.getElementById('myButton');
    button.addEventListener('click', dispatchCustomEvent);
  </script>
</body>
</html>
